<template>
	<view>
		<view>
			<!-- 将导航栏数据放入navData中,默认为{[name: 'XXX']}，可到componets/Nav.vue中修改 -->
			<vphNav :navData="navData" @changeTab='changeTab' :changeNavIndex="current"></vphNav>
			<!-- 列表 -->
			<view class="uni-tab-bar">
				<swiper class="swiper-box" :autoplay="false" :duration="200" @change="changeSwiper" :style="{height:swiperheight+'px'}" :current="tabIndex">
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
					<swiper-item>
						<view>你好</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import vphNav from '../../components/goods/vph-nav'
	import apiorder from '../../common/api/order.js';
	export default {
		data() {
			return {
				current: 0,
				navData: [
					{name:'你好'},
					{name:'很好'},
					{name:'非常好'},
					{name:'你好'},
					{name:'很好'},
					{name:'非常好'},
					{name:'你好'},
					{name:'很好'},
					{name:'非常好'},
					{name:'你好'},
					{name:'很好'},
					{name:'非常好'},
					{name:'你好'},
					{name:'很好'},
					{name:'非常好'},
				],
				tabIndex:0,//tab索引
				swiperheight:300,
			}
		},
		onLoad() {
		},
		components:{
			apiorder,
			vphNav,
		},
		methods: {
			
			// 滑动内容页事件
			changeSwiper(e) {
				this.current = e.detail.current
				this.$emit('changeNavIndex', e.detail.current)
			},
			// 选择导航栏事件
			changeTab(index){
				this.tabIndex = index
			},
			//点击切换
			changTab(index){
				this.tabIndex = index;
			},
			//滑动切换
			tabChange(e){
				this.current = e.detail.current;
			},
			
		}
	}
</script>

<style scoped>
/**商品详情**/	
.goods-index-detail{
	width:96%;
	display: flex;
	flex-direction:row;
	flex-wrap:wrap;
	white-space:nowrap;
	padding:2%;
}
.goods-index-detail>view:nth-child(odd){
	margin-right:2%;
}
.s-list-detail{
	width:49%;
	margin-bottom:20upx;
}
.t-list-img image{
	width:100%;
	height:200upx;
	margin-top:10upx;
	border-radius:15upx;
}
.goods-index-title{
	width:100%;
	display:flex;
}
.goods-index-title>image{
	width:50upx;
	height:50upx;
	display:inline-block;
	position:relative;
}
.goods-index-title>text{
	display:block;
	padding-left:10upx;
	width:80%;
	white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
	overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
	text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
	-o-text-overflow: ellipsis; /* 特定浏览器前缀 */
	text-decoration: none; /* 无用 */
}
.goods-index-money{
	margin-top:20upx;
}
.goods-index-money>text:first-child{
	background:#ffd9d9;
	font-size:15upx;
	padding:7upx 15upx;
	color:#F76260;
	border-radius:5upx;
}
.goods-index-money>text:last-child{
	background:#8A6DE9;
	font-size:15upx;
	padding:7upx 15upx;
	color:#fff;
	margin-left:20upx;
	border-radius:10upx;
}
.goods-index-price{
	color:#F76260;
}
.goods-index-price>text:first-child{
	font-size:40upx;
}
.goods-index-price>text:last-child{
	color:#ccc;
	margin-left:20upx;
}
.goods-index-shop{
	font-size:20upx;
	color:#ccc;
}
.goods-index-shop>text:last-child{
	margin-left:20upx;
}	
/**商品详情结束**/

.goods-header-search{
	width:90%;
	margin:0 auto;
}
.goods-header-search>input{
	border-radius:20upx;
}
.good-header{
	width:100%;
	height:350upx;
	background-image: url(../../static/buytao/jd.jpg);
	background-size: cover;
}
.goods-header-size{
	width:100%;
	height:220upx;
}
.goods-header-ad{
	padding:20upx 0;
	width:100%;
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	justify-content:left;
	flex-wrap:wrap;
	border-radius:20upx;
}
.goods-header-main{
	width:100%;
	flex:1;
}
.goods-header-main>image{
	width:100%;
}
</style>
